<!DOCTYPE html>
<html lang="en">
<head>
    <title>${title}</title>
    <meta name=”keywords” content=”${keywords}”/>
    <meta name="description" content="${description}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstrap-css -->

    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/stylea.css" type="text/css" media="all"/>
    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->
    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <style type="text/css">
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body>
<!--banner-->
@include("../_header.html",{current:'联系我们'}){}
<div class="banner-top w3layouts-banner-top-message visible-lg-block visible-md-block" style="height: 370px">
</div>

<div class="banner-top visible-xs-block visible-sm-block"
     style="height: 150px;background: url('/static/images/mobile/message/banner.jpg') no-repeat 0 ;background-size: cover ">
</div>
<!--//banner-->

<div class="container-fluid">
    <div class="visible-md-block visible-lg-block">
        <div class="container" style="margin-top: 10px;">
            <div id="massage" style="z-index: 999;width: 200px;opacity: 0.8">
                @include("../container_left.html"){}
            </div>
            <div class="media-left" style="display:block;width:100%;height:400px;margin:40px 0;border:#ccc solid 1px;" id="dituContent"></div>
        </div>
    </div>
    <div class="visible-xs-block visible-sm-block">
        <div class="media-left" style="display:block;width:100%;height:400px;margin:20px 0;border:#ccc solid 1px;" id="dituContentMobile"></div>
    </div>
</div>
<style type="text/css">
    .text-tip {
        display: block;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        padding: 10px 10px;
        line-height: 18px;
        position: fixed;
        left: 50%;
        bottom: 25%;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        border-radius: 3px;
        display: none;
        z-index: 9999;
        font-size: 12px;
        text-align: center;
    }
</style>
<script type="text/javascript">
    //创建和初始化地图函数
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        //addMapControl();//向地图添加控件
        //addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 pc
        var mapMobile = new BMap.Map("dituContentMobile");//在百度地图容器中创建一个地图 mobile
        var point = new BMap.Point(117.938615,33.949851);//定义一个中心点坐标
        map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
        mapMobile.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
        var marker = new BMap.Marker(point);//创建标注
        map.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
        mapMobile.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
        window.map = map;//将map变量存储在全局
        window.mapMobile = mapMobile;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图

        mapMobile.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        mapMobile.enableScrollWheelZoom();//启用地图滚轮放大缩小
        mapMobile.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        mapMobile.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        mapMobile.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        mapMobile.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
        mapMobile.addControl(ctrl_sca);
    }

    //标注点数组117.938615,33.949851
    var markerArr = [{title:"江苏佳盛源农业发展有限公司",content:"我的备注",point:"117.938615|33.949851",isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
    ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            mapMobile.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://jsyweb.jiashengqizhi.com/static/images/icon/email.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

    initMap();//创建和初始化地图
</script>
<script type="text/javascript">
    function textTip(str, t, callBack) {
        t = t || 2000;
        var dom = document.createElement("p");
        dom.setAttribute('class', 'text-tip');
        document.body.appendChild(dom);
        var mytip = document.querySelector('.text-tip')

        mytip.style.display = "block";
        mytip.innerHTML = str;
        var tipHeight = mytip.offsetHeight;

        //文字两行或两行以上
        if ((tipHeight - 20) / 18 > 1) {
            mytip.style.width = "55%";
        }
        setTimeout(function () {
            mytip.style.display = "none";
            mytip.parentNode.removeChild(mytip);
            if (callBack) {
                callBack();
            }
        }, t);
    }

    $("#submit").on("click", function () {
        var name = $('#inputName').val();
        var phone = $('#inputPhone').val();
        var email = $('#inputEmail').val();
        var content = $('#inputContent').val();
        if (name == "" || phone == "" || content == "") {
            alert("请填写必填选项！");
        }else {
            var regu =/^[1][3|4|5|6|7|8|9][0-9]{9}$/;
            var te =  /^[0-9a-zA-Z\u4e00-\u9fa5]{10,}/;
            if (!regu.test(phone)) {
                alert("请填写正确手机号！");
            }else if(!new RegExp(te).test(content)){
                alert("消息不含特殊字符,且至少十位数！");
            }else{
                var param = new Object();
                param.name = name;
                param.phone = phone;
                param.message = content;
                param.email = email;
                $.ajax({
                    type: "post",
                    url: "/message/add",
                    dataType: 'json',
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(param),
                    success: function (result) {
                        if(result.code==1){
                            alert(result.msg);
                            $("input[type=reset]").trigger("click");
                        }else{
                            alert(result.msg);
                        }
                    }
                })
            }

        }
    });
    $("#submit2").on("click", function () {
        var name = $('#inputName2').val();
        var phone = $('#inputPhone2').val();
        var email = $('#inputEmail2').val();
        var content = $('#inputContent2').val();
        if (name == "" || phone == "" || content == "") {
            textTip('除邮箱外必填', 2000);
        } else {
            var regu =/^^[1][3|4|5|6|7|8|9][0-9]{9}$/;
            var te =   /^[0-9a-zA-Z\u4e00-\u9fa5]{10,}/;
            if (!new RegExp(regu).test(phone)) {
                textTip('请填写正确手机号', 2000);
            }else if(!new RegExp(te).test(content)){
                textTip('消息不含特殊字符，且至少十位数！', 2000);
            }else{
                var param = new Object();
                param.name = name;
                param.phone = phone;
                param.message = content;
                param.email = email;
                $.ajax({
                    type: "post",
                    url: "/message/add",
                    dataType: 'json',
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(param),
                    success: function (result) {
                        if(result.code==1){
                            textTip(result.msg, 2000);
                            $("input[type=reset]").trigger("click");
                        }else{
                            textTip(result.msg, 2000);
                        }

                    },
                    error: function () {
                        textTip("提交失败！", 2000);
                    }
                })
            }

        }
    });

</script>
<script src="${ctxPath}/static/js/exporting.js"></script>
<script>
    $("input").click(function () {
        $(this).css("borderColor", "#50c9a0");
        $("input").not(this).css("borderColor", "#BDBDBD");
        $("textarea").css("borderColor", "#BDBDBD");
    });
    $("input").click(function (event) {
        event.stopPropagation();
    });
    $("textarea").click(function () {
        $(this).css("borderColor", "#50c9a0");
        $("input").css("borderColor", "#BDBDBD");
    });
    $("textarea").click(function (event) {
        event.stopPropagation();
    });
    $(document).click(function () {
        $("input").css("borderColor", "#BDBDBD");
        $("textarea").css("borderColor", "#BDBDBD");
    });


</script>
<!-- footer -->
@include("../_footer.html"){}
<!-- //footer -->

<script src="${ctxPath}/static/js/jarallax.js"></script>
<script src="${ctxPath}/static/js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
        });
    });
</script>
<script src="${ctxPath}/static/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
<!-- //here ends scrolling icon -->

</body>
</html>
